<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .banner{position: relative;margin: 0 auto;width: 400px;height: 120px;overflow: hidden;}
    .banner .imgbox{position:absolute;left:0;}
    .banner .imgbox img{width: 400px;height: 120px;float: left;}
    .banner .imgbox img.active{display: block;}

    .banner .btns input{position: absolute;width:30px;height:30px;border: none;top:45px;}
    .banner .btns .left{left:0}
    .banner .btns .right{right:0}
    .banner .btns input:active{background: #66a;color: #fff;}
  </style>
</head>
<body>
  <div class="banner">
    <div class="imgbox">
      <img src="../imgs/banner1.jpg" alt="">
      <img src="../imgs/banner2.jpg" alt="">
      <img src="../imgs/banner3.jpg" alt="">
      <img src="../imgs/banner4.jpg" alt="">
      <img src="../imgs/banner5.jpg" alt="">
    </div>
    <div class="btns">
      <input type="button" class="left" value="<">
      <input type="button" class="right" value=">">
    </div>
  </div>
</body>
<script src="../move.js"></script>
<script>

  var banner = $(".banner");
  var left = $(".banner .left");
  var right = $(".banner .right");
  var imgbox = $(".banner .imgbox");
  var imgs = $$(".banner .imgbox img");

  imgbox.style.width = imgs.length * imgs[0].offsetWidth + "px";

  // 0   0px
  // 1   -400px
  // 2   -800px
  // 3   -1200px
  // 4   -1600px


  // 默认索引（默认要显示的图片）
  var index = 0;
  // 根据默认索引添加class（显示）
  imgbox.style.left = -index * imgs[0].offsetWidth + "px";

  // 右按钮时要执行播放下一张图片功能
  right.onclick = rightClick;

  // 自动播放（播放下一张图片）
  var t = setInterval( rightClick , 2000 );

  // 鼠标进入容器，停止自动播放
  banner.onmouseover = function(){
    clearInterval( t );
  }

  // 鼠标离开容器，继续自动播放
  banner.onmouseout = function(){
    t = setInterval( rightClick , 2000 );
  }

  // 播放下一张图片的功能
  function rightClick(){
    // 计算当前要显示的图片的索引
    if(index === imgs.length-1){
      index = 0;
    }else{
      index++;
    }
    // 根据当前索引计算imgbox的位置
    // imgbox.style.left = -index * imgs[0].offsetWidth + "px";
    move(imgbox, {left: -index * imgs[0].offsetWidth});
  }

  // 作业：左按钮功能
  left.onclick = function(){
    // 计算当前要显示的图片的索引
    if(index === 0){
      index = imgs.length-1;
    }else{
      index--;
    }
    // 根据当前索引计算imgbox的位置
    // imgbox.style.left = -index * imgs[0].offsetWidth + "px";
    move(imgbox, {left: -index * imgs[0].offsetWidth});
  }


  function $(s){
    return document.querySelector(s);
  }
  function $$(s){
    return document.querySelectorAll(s);
  }
  
</script>
</html>